<template>
	<view class="examine-container">
		<view class="examine-list mb24">
			<view class="examine-item">
				<view class="examine-head">
					<!-- <text class="label">招聘考试</text> -->
					<text class="sub-title">{{ details.recruitTitle }}</text>
				</view>
				<view class="jobfair-labels">
					<text class="label">{{ details.enterpriseType }}</text>
					<text class="label">{{ details.stationNumber || 0 }}个岗位</text>
				</view>
				<view class="info-item">
					<text class="label-tip">招聘单位： </text>
					<text class="label-value">{{ details.employer }}</text>
				</view>
				<view class="info-item">
					<text class="label-tip">发布时间： </text>
					<text class="label-value">{{ details.releaseTime | formatDateTime }}</text>
				</view>
				<view class="info-item">
					<text class="label-tip">报名时间： </text>
					<text class="label-value">{{ details.startTime | formatDateTime }}</text>
				</view>
				<view class="info-item">
					<text class="label-tip">报名截止： </text>
					<text class="label-value">{{ details.endTime | formatDateTime }}</text>
				</view>
				
				<view class="examine-desc">
					<view class="subtitle">
						公告详情：
					</view>
					<u-parse :content="details.specifics" :tagStyle="style"></u-parse>
				</view>
			</view>
		</view>

		<view class="btn-wrap">
			<button class="result-btn" @tap="handleDownload">岗位清单</button>
			<button class="examine-btn" v-if="details.userInfoStatus === 2" @tap="handleDetail">报名详情</button>
			<button class="examine-btn" v-else @tap="handleApply">开始报名</button>
		</view>
	</view>
</template>
<script>
	import {
		getRecruit,
	} from '@/common/api_examine.js'
	export default {
		data() {
			return {
				recruitId: '',
				loading: true,
				skeletonCofig: {
					headShow: false
				},
				details: {},
				style: {
					text: 'font-size: 13px;color: #34314F;line-height: 22px;',
					img: 'display:-webkit-box;width:100% !important;'
				}
			}
		},
		onLoad(option) {
			this.recruitId = option.id
			this.getList(option.id)
		},

		methods: {
			async getList(id) {
				const res = await getRecruit(id)
				if (res.code === 200) {
					this.details = res.data
				}
				this.loading = false
			},
			handleDetail() {
				uni.navigateTo({
					url: `/subpage/examine/examinedetail?id=${this.recruitId}`
				})
			},
			handleApply() {
				uni.navigateTo({
					url: `/subpage/examine/applyform?id=${this.recruitId}`
				})
			},
			handleDownload() {
				const url = this.api_host + this.details.positionUrl
				uni.downloadFile({ //调用uni中的下载方法
					url: url,
					success: (res) => {
						console.log(res.tempFilePath, "下载");
						if (res.statusCode === 200) {
							uni.openDocument({
								filePath: res.tempFilePath,
								showMenu: true, // 右上角菜单，可以进行分享保存pdf
								success: function(file) {
									console.log("文件打开成功", file)
								}
							})
						}
					},
					fail: (err) => {
						console.log('下载文件失败', err);
						uni.showToast({
							title: '失败',
							icon: 'none'
						})
					}
				});
			},
			statusText(type) {
				switch (type) {
					case 0:
						return {
							class: 'start',
							text: '未开始'
						}
					case 1:
						return {
							class: 'hot',
							text: '报名中'
						}
					case 2:
						return {
							class: 'being',
							text: '公示中'
						}
					case 3:
						return {
							class: 'end',
							text: '已结束'
						}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.examine-container {
		min-height: 100vh;
		padding: 24rpx 32rpx 32rpx;
		background: #F2F5FF;
		box-sizing: border-box;

		.examine-list {
			.examine-item {
				width: 100%;
				padding: 30rpx 28rpx 28rpx 32rpx;
				box-sizing: border-box;
				border-radius: 40rpx;
				background-color: #fff;

				.examine-head {
					margin-bottom: 4rpx;

					.label {
						display: inline-block;
						padding: 6rpx 12rpx;
						margin-right: 12rpx;
						font-size: 22rpx;
						color: #34314F;
						line-height: 24rpx;
						text-align: center;
						background: #F0F0F2;
						border-radius: 12rpx;
					}

					.sub-title {
						font-weight: 600;
						font-size: 32rpx;
						color: #34314F;
						line-height: 44rpx;
						text-align: left;
					}
				}

				.examine-title {
					margin-bottom: 16rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 44rpx;
					text-align: left;


				}
				
				.jobfair-labels {
					display: flex;
					flex-wrap: nowrap;
					margin-bottom: 24rpx;
					text {
						display: block;
						margin-right: 16rpx;
						padding: 4rpx 12rpx;
						font-size: 24rpx;
						color: rgba(52, 49, 79, 0.8);
						line-height: 32rpx;
						border-radius: 8rpx;
						background-color: #F4F4F4;
						box-sizing: border-box;
					}
				}

				.info-item {
					margin-bottom: 8rpx;

					.label-tip {
						font-weight: 400;
						font-size: 26rpx;
						color: #9A98A7;
						line-height: 22px;
						text-align: center;
						font-style: normal;
					}

					.label-value {
						font-weight: 400;
						font-size: 26rpx;
						color: #34314F;
						line-height: 22px;
						text-align: left;
						font-style: normal;
					}

					.status {
						&.wait {
							font-weight: 600;
							font-size: 26rpx;
							color: #FF7F1C;
							line-height: 22px;
							text-align: left;
							font-style: normal;
						}
					}
				}
				
				.examine-desc {
					padding-top: 24rpx;
					border-top: 1px solid #F3F3F3;
					
					.subtitle {
						margin-bottom: 20rpx;
						font-weight: 600;
						font-size: 32rpx;
						color: #34314F;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
					}
					
				}


			}
		}

		.pay-wrap {
			width: 100%;
			padding: 30rpx 28rpx 40rpx 32rpx;
			box-sizing: border-box;
			border-radius: 40rpx;
			background-color: #fff;

			.common-title {
				font-weight: 600;
				font-size: 32rpx;
				color: #34314F;
				line-height: 44rpx;
				text-align: left;
			}

			.pay-tip {
				margin-bottom: 12rpx;
				font-size: 26rpx;
				color: #34314F;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}

			.pay-date {
				margin-bottom: 36rpx;
				font-size: 26rpx;
				color: #FF7F1C;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}

			.pay-image {
				margin-bottom: 48rpx;

				image {
					display: block;
					width: 500rpx;
					height: 750rpx;
					margin: 0 auto;
				}
			}

			.upload-box {
				margin-top: 50rpx;

				.upload-btn {
					width: 276rpx;
					height: 72rpx;
					background: #F7F7F7;
					border-radius: 36rpx;
					border: 1px solid #ECECEC;

					font-weight: 600;
					font-size: 28rpx;
					color: #34314F;
					line-height: 72rpx;
					text-align: center;

					&::after {
						border: 0;
					}
				}
			}
		}

		.btn-wrap {
			// bottom: 28rpx;
			// right: 28rpx;
			display: flex;
			margin-top: 40rpx;
			margin-bottom: 40rpx;

			.result-btn {
				width: 340rpx;
				height: 80rpx;
				margin: 0;
				background: #34314F;
				border-radius: 40px;
				text-align: center;
				font-weight: 600;
				font-size: 14px;
				color: #fff;
				line-height: 80rpx;
				font-style: normal;
				box-sizing: border-box;

				&::after {
					border: 0;
				}
			}

			.examine-btn {
				width: 340rpx;
				height: 80rpx;
				margin: 0 0 0 28rpx;
				background: #FFDE6D;
				border-radius: 40px;
				text-align: center;
				font-weight: 600;
				font-size: 14px;
				color: #34314F;
				line-height: 80rpx;
				font-style: normal;
				box-sizing: border-box;

				&::after {
					border: 0;
				}
			}
		}
	}
</style>